<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">帮我买</div>
    </v-ons-toolbar>

    <!-- 头部 -->
    <div class="head">
      <img class="user-face" src="../../assets/resource/consumer/user/face.jpg" alt="">
      <button class="btn" @click="enterPage({path:'/ModuleApply'})">点击申请其他模块</button>
    </div>

    <!-- 入口 -->
    <div class="ingress">
      <div class="tab-bar">
        <button :class="tabbarIndex == 1 ? 'active':''" @click="selectTabbar({item:1})">
          待推送
        </button>
        <button :class="tabbarIndex == 2 ? 'active':''" @click="selectTabbar({item:2})">
          已推送
        </button>
      </div>
      <div class="ingress-group">

        <div v-if="tabbarIndex == 1">
          <div class='item-not-push' v-for="item in 5">
            <div class='item-info'>
              <div class='gray-color'>订单号：123</div>
              <div>商品：AA</div>
              <div>商品价格：10.0元</div>
              <div>收货地址：地址1</div>
              <div class='gray-color'>来源：美团</div>
            </div>
            <div class='item-status'>
              <button class='push-btn'>推送</button>
              <div class='push-time'>发布于：10分钟前</div>
            </div>
          </div>
        </div>

        <div v-if="tabbarIndex == 2">
          <div class='item-pushed' v-for="item in 5" >
            <div class='item-info'>
              <div class='gray-color'>订单号：123</div>
              <div>商品：AA</div>
              <div>推送订单费：10.0元</div>
              <div>收货地址：地址1</div>
              <div class='gray-color'>来源：美团</div>
            </div>
            <div class='item-status'>
              <div><img class='icon' src='../../assets/resource/module/home/icon1.png' /> 订单已被推送</div>
              <div class='push-time'>发布于：10分钟前</div>
            </div>
          </div>
        </div>


      </div>
    </div>

  </v-ons-page>
</template>

<script>


  export default {
    data() {
      return {
        tabbarIndex: 1,
      };
    },
    methods: {
      enterPage({path: path}) {
        this.$router.push({
          path: path
        });
      },
      selectTabbar({item: item}) {
        this.tabbarIndex = item;
      }
    },
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/module/home.less";
</style>
